<template>
  <div v-if="modelValue">
    {{ modelValue }}
  </div>
	<div v-else-if="flag == 'label'" class="title-label f-between">
		<p>{{ title }}</p>
		<div class="right">
			<slot></slot>
		</div>
	</div>
	<div v-else class="title-bg-label fc">
		<p>{{ title }}</p>
		<slot></slot>
	</div>
</template>

<script lang="ts" setup>
import { defineComponent } from 'vue'
const props = withDefaults(
	defineProps<{
    modelValue?:any
		title?: string
		flag?: string
	}>(),
	{
		title: '',
		flag: 'label',
	}
)
</script>
<style scoped lang="scss">
.position-block {
	position: relative;
	z-index: 0;
	padding-left: vw(60);
	width: 100%;
	height: vw(40);
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	padding-right: vw(20);
}
.title-label {
	margin-bottom: var(--htmlLabelBottom);
	margin-left: var(--htmlLabelLeft);
	@extend .position-block;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 40px;
		background: url('@/assets/icons/label.svg') no-repeat;
		background-size: cover;
		background-position: center;
		z-index: -1;
	}
}
.title-bg-label {
	@extend .position-block;
	color: #fff;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -10px;
		width: 100%;
		height: 40px;
		background: url('@/assets/imgs/headerTitle.webp') no-repeat;
		background-size: cover;
		background-position: center;
		z-index: -1;
		border-radius: 8px;
	}
}
</style>
